﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Calendar, Month Calendar, MonthCalendar, DateTimeInput, DateTimePicker, Date Picker" />
    <meta name="description" content="This demo demonstrates the jqxCalendar widget. Choose a date and navigate through the months by clicking the left or right navigation arrows.
The jqxCalendar has built-in Keyboard navigation so you can click on it and navigate by using the left, right, up or down arrow keys." />
    <title id='Description'>This demo shows how to add restricted dates to jqxCalendar.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var restrictedDates = new Array();
            var date = new Date();
            date.setHours(0, 0, 0);
            date.setDate(2);

            var date2 = new Date();
            date2.setHours(0, 0, 0);
            date2.setDate(3);

            restrictedDates.push(date);
            restrictedDates.push(date2);

            $("#calendar").jqxCalendar({
                theme: 'energyblue',
                width: '200px',
                height: '200px',
                restrictedDates: restrictedDates
            });
        });
    </script>
</head>
<body>
    <div id='calendar'>
    </div>
</body>
</html>
